<template>
    <div i="filters" :class="{'filter-block': block}">
        <slot name="tabs"></slot>
        <a-space :size="spaceSize">
            <div v-for="item in showSetting" :key="item.prop">
                <span class="inline-txt">{{item.label}}</span>
                <template v-if="item.slot">
                    <slot :name="item.prop"></slot>
                </template>
                <div v-if="item.type === 'input'" :style="{'width': item.width || '100%'}">
                    <template v-if="!item.template.options">
                        <a-input
                            v-model="form[item.prop]"
                            :placeholder="item.template.placeholder"
                            :allowClear="item.template.clearable"
                            @change="val => changeFormValue(val, item.template.callback)"
                            @click="val => changeFormValue(val, item.template.oc)" />
                    </template>
                    <template v-else>
                        <a-input-group compact>
                            <a-select v-model="form[item.template.prop]" placeholder="请选择" v-if="item.template.options" style="width: 100px">
                                <a-select-option v-for="option in item.template.options" :key="option.value" :value="option.value">{{option.label}}</a-select-option>
                            </a-select>
                            <a-input
                                v-model="form[item.prop]"
                                :placeholder="item.template.placeholder"
                                :allowClear="item.template.clearable"
                                style="width: 150px"
                                @change="val => changeFormValue(val, item.template.callback)" />
                        </a-input-group>
                    </template>
                </div>
                <div v-if="item.type === 'select'">
                    <a-select
                        v-model="form[item.prop]"
                        class="inline-select"
                        :placeholder="item.template.placeholder"
                        :allowClear="item.template.clearable"
                        :show-search="item.template.filterable"
                        :style="{width: item.width + 'px' || 'auto'}"
                        @popupScroll="(val)=>item.template.popupScroll && item.template.popupScroll(val)"
                        @change="val => changeFormValue(val, item.template.callback, item)"
                        @search="val => changeFormValue(val, item.template.search, item)"
                    >
                        <a-select-option
                            v-for="option in item.template.options"
                            :key="option[item.template.valueKey || 'value']"
                            :value="option[item.template.valueKey || 'value']">
                            {{option[item.template.labelKey || 'label']}}
                        </a-select-option>
                    </a-select>
                </div>
                <div v-if="item.type === 'daterange'">
                    <a-range-picker
                        v-model="form[item.prop]"
                        :allowClear="item.template.clearable"
                        :show-time="{
                            defaultValue: [$moment('00:00:00', 'HH:mm:ss'), $moment('23:59:59', 'HH:mm:ss')]
                        }"
                        valueFormat="YYYY-MM-DD HH:mm:ss"
                        @ok="val => changeFormValue(val, item.template.callback)"
                        @change="val => !val.length && changeFormValue(val, item.template.callback)"
                    />
                </div>
                <div v-if="item.type === 'daterange3'">
                    <a-range-picker
                        v-model="form[item.prop]"
                        :allowClear="item.template.clearable"
                        valueFormat="YYYY-MM-DD"
                        @ok="val => changeFormValue(val, item.template.callback)"
                        @change="val => changeFormValue(val, item.template.callback)"
                    />
                </div>
                <div v-if="item.type === 'daterange2'">
                    <a-month-picker
                        v-model="form[item.prop]"
                        valueFormat="YYYY-MM-DD"
                        @ok="val => changeFormValue(val, item.template.callback)"
                        @change="val => changeFormValue(val, item.template.callback)"
                    />
                </div>
            </div>
            <Btns :data="showBtn" justify="flex-start" v-if="showBtn.length" />
        </a-space>
    </div>
</template>
<script>
export default {
    name: 'Filters',
    props: {
        form: {
            type: Object,
            default: () => ({})
        },
        filterData: {
            type: Object,
            default: () => ({})
        },
        block: { // 单独一个模块
            type: Boolean,
            default: false
        },
        spaceSize: {
            type: [String, Number],
            default: 'small'
        },
        showBtn: {
            type: Array,
            default: () => []
        }
    },
    data () {
        return {
            timer: 0 // 计时器
        }
    },
    computed: {
        showSetting () {
            return Object.entries(this.filterData)
                    .map(item => Object.assign({ prop: item[0] }, item[1]))
                    .filter(item => item.show !== false)
        }
    },
    methods: {
        changeFormValue (val, cb, item) {
            // 防抖
            clearTimeout(this.timer)
            this.timer = setTimeout(() => {
                cb && cb(val, item)
                this.$emit('confirm')
            }, 500);
        }
    }
}
</script>
<style lang="scss">
    [i="filters"] {
        display: flex;
        // flex-wrap: wrap;
        &.filter-block {
            display: flex;
            align-items: flex-end;
            margin: 0 20px 20px;
            min-width: 960px;
            background: #fff;
            padding: 20px 25px 5px;
        }
        .ant-space {
            flex-wrap: wrap;
            .ant-space-item {
                margin-bottom: 15px;
            }
        }
        .inline-txt {
            display: inline-block;
            font-size: 12px;
            margin-bottom: 5px;
            color: rgba(0, 0, 0, .45);
        }
        .el-input__inner {
            border-radius: 2px;
        }
        .inline-select {
            width: 120px;
        }
    }
</style>
